<template>
  <div id="login">
    <transition appear appear-active-class="fade-active">
      <div class="container">
        <form class="login-form">
          <p class="TopTip">登录</p>
          <div style="position: relative">
            <input type="text" placeholder="用户名" v-model="username" />
            <i class="iconfont iconxingmingyonghumingnicheng"></i>
          </div>
          <div style="position: relative">
            <input type="password" placeholder="密码" v-model="password" />
            <i class="iconfont iconmima"></i>
          </div>
          <div
            @click="$router.push('/forget')"
            style="text-align: right; font-size: 13px; color: cornflowerblue"
          >
            忘记密码?
          </div>
          <button @click.prevent="login">
            <span>登录</span>
          </button>
          <button @click.prevent="router.push('/register')">注册</button>
          <button @click.prevent="router.push('/index')">不想登录，回去吧</button>
        </form>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { user } from "@/type/user";
import { useRouter } from "vue-router";
import axios from "@/http";
import { useUserStore } from "@/store";
import { jwtDecode } from "jwt-decode";
import msg from "@/components/msg/msg";
import { md5 } from "@/util/util";

const store = useUserStore();
const router = useRouter();
let username = ref<string>("");
let password = ref<string>("");
const login = () => {
  const newPassword = md5(password.value);
  axios
    .post("/user/login", {
      username: username.value,
      password: newPassword,
    })
    .then(({ data: data }) => {
      if (data.error === 0) {
        msg.error("用户名或密码错误");
      } else {
        const decode: user = jwtDecode(data.data);
        localStorage.setItem("LoginToken", data.data);
        store.setUser(decode);
        store.setToken(isEmpty(decode));
        username.value = "";
        password.value = "";
        router.push("/");
      }
    });
};
const isEmpty = (value: object | string) => {
  if (
    value == "" ||
    Object.values(value).length == 0 ||
    value == undefined ||
    Object.keys(value).length == 0
  ) {
    return false;
  } else {
    return true;
  }
};
</script>

<style lang="scss" scoped>
// 	@font-face {
//     font-family:"iconfont";
//     src: url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.eot?t=1595250028468');
//     /* IE9 */
//     src: url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.eot?t=1595250028468#iefix') format('embedded-opentype'),
//     /* IE6-IE8 */
//     url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO4AAsAAAAAB4gAAANrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCXIJTATYCJAMMCwgABCAFhG0HShutBhHVmyHI/pTcNgvWrP5AVbDQ9lgrgZnXxQuveyCaFF8YMvmNmvDX6ZOyATPzmOCffr927rN1hSQa6SJexUNiSGTPTPdSSIG+ISHxz/+5ftgqvHRAe+PWAp4OrwK8wBrw8OjsB93RaYGNB/6PvffFr5yNBzKgaN7xDKFvW+O8cTRtwACK4vH2XXuR5TgD/QnlUI7VB0rbHLUvzQ3kNGqDSi4AdHKQhGkiKcShtaAgiumrWdo6/zVAwJDwxkBCFZcHCP8NMInn+n8OlzaWwJjfslzmGM+jXhTHAQU09iK7AzkgP5Xwam7QY7B3QyCpWwCOTy5vU+bogwS0vXF2QDmh5ypKJU5CwcxMx2BaPO6gLzDGk/f7+gWFGIZP9JHrqzPHDH/4HybN+hstBwEEw1kBcR5YMALgoNlC+74UxEdgyY88V+cGjpihQv97/K8yLPQfz0BFenEawAASBp1DiwWhY+ZgAFgAgZKX8AJ1uetarr+uFel6zptXVj+T8oVWjrSW5AbEGmMdN8v5OoZVWGO26hNxYtOJ1p37adginaS+cnLV09xDM+U1tbp3bsxvBsy6/dS4ucrL/u3u5flueb2XK9dxcHp6bUuiwIHGTIZT0PLTrj8Wpnu/nZgECxxYwljZzETwXu8QksDVaBC1JPe1vgvY7u9fZHBYC9F06TKeq4wsW7NeDxCzCDvzx4rlkyVIAsfBqOnT/+1wvVHpj/6Gf9U9YW9w/c670/OwuYrb7i30AKLSH9ZLPr3i61f0N1wNlY+6avRXLQP4bt4EfFF5rLmR+Ak4hBciaFjhviLdYLPGt/h/hzUd82IAruQioruLXt2VlcbFIHGVCIyYLrDiepAOOwJeyigEcWOQNCyZn1LSSZQrYMiaQPKuYGR9gZX3QDrsE7yqDwT5CJJ2g7liSl82LRwz9gVHMHgGGtpEmSZZ8EuvUadRn+Mij3qP7CkE+UwunTrHBHmIMf5BF0QUKLYxnNF+GEUWHNsAh5IxIq6RzaqiL2WGNh5bcMzYFxyBwTOgoU2UU18WMj9/jTqN+lxR9sN+j+ypeZCXkWuAPJcnjcou5R7/oAtEFFBsY3BGVoyMuAWuuFuAQ8kwHaKuIcuqqabyzPTK+P42QJU+JhVDCtnGKNGxRXi2OpMGkYSGBt3cqZji/tgYAA==') format('woff2'), url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.woff?t=1595250028468') format('woff'), url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.ttf?t=1595250028468') format('truetype'),
//     /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
//     url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.svg?t=1595250028468#iconfont') format('svg');
//     /* iOS 4.1- */
// }
@font-face {
  font-family: "advice";
  src: url("../../assets/font/advice (2).woff");
  src: url("../../assets/font/advice (2).woff") format("woff");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.iconxingmingyonghumingnicheng:before {
  content: "\e623";
  position: absolute;
  right: 10px;
  top: 14px;
}
.iconmima:before {
  content: "\e668";
  position: absolute;
  right: 10px;
  top: 14px;
}
.TopTip {
  font-family: advice;
  font-size: 35px;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  // box-sizing: content-box;
}
.login-form {
  // border-radius: 15px;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  text-align: center;
  position: relative;
  z-index: 100;
  overflow: hidden;
}
.login-form::before {
  content: "";
  // border-radius: 15px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 6px;
  left: 4px;
  z-index: -1;
  filter: blur(6px);
  overflow: hidden;
}
.login-form h2 {
  font-size: 18px;
  font-weight: 400;
  color: #333;
}

.login-form input {
  box-sizing: border-box;
  margin: 6px 0;
  height: 36px;
  width: 100%;
  border: none;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  padding: 0 14px;
  color: #333;
}
.login-form input::placeholder {
  color: #3d5245;
}
.login-form button {
  border-radius: 5px;

  margin-top: 10px;
  border: none;
  height: 36px;
  background-color: rgba(57, 88, 69, 0.4);
  color: white;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.4s;
}
.login-form button:hover {
  background-color: rgba(12, 80, 38, 0.67);
}
//生成before印记
.login-form button::before,
.login-form button::after {
  content: "";
  display: block;
  width: 80px;
  height: 100%;
  background-color: rgba(179, 255, 210, 0.5);
  opacity: 0.5;
  position: absolute;
  left: 0;
  top: 0;
  transform: skewX(-15deg);
  filter: blur(30px);
  overflow: hidden;
  transform: translateX(-100px);
}
//生成after印记
.login-form button::after {
  width: 40px;
  background-color: rgba(179, 255, 210, 0.3);
  left: 60px;
  filter: blur(5px);
  opacity: 0;
}
//鼠标移动到按钮上 印记移动
.login-form button:hover::before {
  transition: 1s;
  transform: translateX(320px);
  opacity: 0.7;
}
.login-form button:hover::after {
  transition: 1s;
  transform: translateX(320px);
  opacity: 1;
}
.fade-active {
  opacity: 0;
  animation: leave 0.5s linear;
}
@keyframes leave {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
